<template>
  <div>
    <proposer></proposer>
    <div class="header">
      您申请了 <span>{{obj.position}}</span> 职位
    </div>
    <div class="bottom">
      <div class="box"
           v-if="isShow">
        <van-icon name="edit" />
        <p>还没有推荐记录哦</p>
        <p>赶快到 <span class="list"
                @click="li">职位列表</span> 去推荐吧</p>
      </div>
      <div class="cad"
           v-if="!isShow">
        <div class="card">
          <div class="card-top">{{obj.position}}</div>
          <div class="card-cen">
            <div class="cen-lt">
              <i class="el-icon-location-outline"></i>
              {{obj.site}}
            </div>
            <div class="cen-rt">
              <i class="el-icon-time"></i>
              {{obj.time}}
            </div>
          </div>
          <div class="card-fot">
            <i class="el-icon-s-data"></i>
            {{obj.sort}}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import proposer from "@/components/proposer"
import { Toast } from 'vant'
export default {
  data () {
    return {
      isShow: " ",
      obj: {
        position: "安全技术高级工程师",
        site: "深圳",
        time: "2021-12-17",
        sort: "云服务族"
      }
    }
  },
  methods: {
    li () {
      this.$router.push('/phoneindex')
    },
    pd () {
      if (this.obj) {
        this.isShow = false
      } else {
        this.isShow = true
      }
    },

  },
  mounted () {
    this.pd()
  },
  components: {
    proposer
  }
}
</script>

<style scoped>
.header {
  height: 40px;
  background: #9b0f15;
  color: #fff;
  font-size: 17px;
  line-height: 40px;
  padding-left: 25px;
}
.header span {
  color: burlywood;
}
p {
  margin: 0;
}
.bottom /deep/.van-icon-edit {
  font-size: 60px;
  margin-bottom: 15px;
}
.list {
  text-decoration: underline;
}
.bottom p {
  font-size: 15px;
  margin-top: 5px;
}
.box {
  text-align: center;
  margin-top: 65px;
}
.card {
  border-bottom: 1px solid #e3e3e3;
  padding: 20px;
  position: relative;
}
.card-top {
  font-size: 14px;
  color: #333;
  margin-bottom: 10px;
}
.card-cen {
  font-size: 12px;
  color: #989898;
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.card-fot {
  color: #989898;
  font-size: 12px;
}
.quxiao {
  height: 21px;
  width: 21px;
  border-radius: 50%;
  background: #ccc;
  color: #fff;
  line-height: 21px;
  text-align: center;
  position: absolute;
  right: 5px;
  top: 15px;
}
</style>